/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<!-- 重复的分销订单 -->
		<view class="order-title">
		    <view v-for="(item,index) in statuses" :key="index" class="order-status" :class="[ item.status==activeStatus?'active':'']" 
		        :data-status="item.status" @tap='changeTab'>{{item.name}}</view>
		</view>
		
		<view class="order-li" v-for="(order,index) in orders" :key="index" >
		    <view class="order-header">
		        <view class="order-seller ellipsis-1">买家：{{order.nickname}}</view>
		        <view class="order-status-name">
		            {{order.status==0?'未付款':''}}{{order.status==1?'已付款':''}}{{order.status==2?'等待分成(已收货)':''}}
		            {{order.status==3?'已分成':''}}{{order.status==4?'已取消':''}}
		        </view>
		    </view>
		    <view class="order-sn">订单号：{{order.order_sn}}</view>
		    <view class="order-time">{{order.createTimeFormat}}</view>
		
		    <view class="order-goodimg" v-for="(item,index) in order.goods_list" :key="index">
		        <image class="order-img" :src="hostUrl+'/mall/goods/thumb_image?goods_id='+ item.goods_id+'&width='+goodsImgWidth+'&height='+goodsImgHeight+'&'+item.goods_id+'.'+imgType"></image>
		        <view class="order-content">
		            <view class="goods-name ellipsis-1">{{item.goods_name}}</view>
		            <view style="color:red;">￥{{item.member_goods_price}}</view>
		            <view class="ellipsis-1" style="color:#7f7f7f;">{{item.spec_key_name}}</view>
		        </view>
		    </view>
		    
		    <view class="order-total">
		        <text style="color:#7f7f7f;">获得佣金：</text><text style="color:red;">￥{{order.money}}</text>
		    </view>
		</view>
		
		<view class="no-data" v-if="!orders || orders.length == 0">
		    <image :src="imgUrl+'common/cart-null.png'" class="cart-image"/>
		    <view class="no-data-title">没有找到相关的记录</view>
		    <navigator url="/pages/index/index" class="lookat" open-type="navigate"> 去逛逛 </navigator>
		</view>
	</view>
</template>

<script>
	import config from "@/api/config.js";
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				hostUrl:config.host,
				imgUrl:config.imgUrl,
				activeStatus:'0',
				orders:"",
				statuses: [
					{ name: "未付款", status: '0' },
					{ name: "已付款", status: '1,2' },
					{ name: "已完成", status: '3' }
				],
			}
		},
		computed: {
			...mapState(['imgType','goodsImgHeight','goodsImgWidth'])
		},
	}
</script>

<style lang="scss">
page{
    font-size: 28rpx;
}
.order-title{
    height: 80rpx;
    background-color: white;
}
.order-status{
    width: 33.33%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    vertical-align: middle;
    float: left;
}
.active{
    color:red;
}
.order-li{
    background-color: white;
    margin: 10rpx 0;
    padding: 0 20px;
}
.order-header{
    height: 80rpx;
    border-bottom: 1rpx  solid #f3f3f3;
}
.order-seller{
    float: left;
    line-height: 80rpx;
    vertical-align: middle;
    max-width: 500rpx;
}
.order-status-name{
    float: right;
    color: red;
    line-height: 80rpx;
    vertical-align: middle;
}
.order-goodimg{
    margin: 20rpx 0;
    height: 170rpx;
}
.order-img{
    width: 150rpx;
    height: 150rpx;
    background-repeat: no-repeat;
    background-size: 150rpx;
    float: left;
}
.order-sn{
    margin-top: 10rpx;
}
.order-time{
    color:#7f7f7f;
    font-size: 24rpx;
}
.order-content{
    float: left;
    margin-left: 10rpx;
    font-size:26rpx;
    line-height:38rpx;
}
.goods-name{
    color: #333;
    width: 500rpx;
}
.order-total{
    padding: 20rpx 0;
    text-align:right;
    border-top: 1rpx  solid #f3f3f3; 
}
</style>
